<template>
  <div>

    <!-- 设备信息 -->
    <el-descriptions :column="3" border>
      <template slot="title">
        <span>设备信息</span>&nbsp;&nbsp;
        <el-button style="margin-left: 30px;" type="text" icon="el-icon-edit" @click="deviceUpdate" v-hasPermi="['iot:device:edit']">
          编辑
        </el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          设备ID
        </template>
        {{ deviceDetailInfo.id }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          设备名称
        </template>
        {{ deviceDetailInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          设备类型
        </template>
        <dict-tag :options="dict.type.iot_product_device_type" :value="deviceDetailInfo.deviceType.value"/>
      </el-descriptions-item>
      <!--
      <el-descriptions-item>
        <template slot="label">
          所属机构
        </template>
        {{ deviceDetailInfo.orgId }}
      </el-descriptions-item>
      -->
      <el-descriptions-item>
        <template slot="label">
          连接协议
        </template>
        {{ deviceDetailInfo.transport }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          消息协议
        </template>
        {{ deviceDetailInfo.protocolName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          IP地址
        </template>
        {{ deviceDetailInfo.address }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          创建时间
        </template>
        {{ parseTime(deviceDetailInfo.createTime) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          注册时间
        </template>
        {{ parseTime(deviceDetailInfo.registerTime) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          最后上线时间
        </template>
        {{ parseTime(deviceDetailInfo.onlineTime) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          描述
        </template>
        {{ deviceDetailInfo.description }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 添加或修改设备对话框 -->
    <device-add-edit ref="deviceAddEdit"/>

    <!-- 认证配置 -->
    <el-descriptions v-show="properties.length > 0" class="descriptions" :column="3" border>
      <template slot="title">

        <span>配置</span>&nbsp;&nbsp;

        <el-button
          class="edit-button"
          type="text"
          icon="el-icon-edit"
          @click="configurationUpdate"
          v-hasPermi="['iot:device:edit']"
        >编辑
        </el-button>

        <span>
          <el-popconfirm @confirm="applyConfiguration" title="确认重新应用该配置？">
            <el-button
              slot="reference"
              class="edit-button"
              type="text"
              icon="el-icon-check"
              v-hasPermi="['iot:device:edit']"
            >应用配置
            </el-button>&nbsp;&nbsp;
          </el-popconfirm>
        <el-tooltip class="item" effect="dark" content="修改配置后需重新应用后才能生效。" placement="top">
          <i class="el-icon-question gray"></i>
        </el-tooltip>
        </span>

        <span v-show="deviceDetailInfo.aloneConfiguration">
          <el-popconfirm @confirm="resetConfiguration" title="确认恢复默认配置？">
            <el-button
              slot="reference"
              class="edit-button"
              type="text"
              icon="el-icon-refresh-left"
              v-hasPermi="['iot:device:edit']"
            >恢复默认
            </el-button>&nbsp;&nbsp;
           </el-popconfirm>
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">
              该设备单独编辑过配置信息，点击此将<br/>
              恢复成默认的配置信息，请谨慎操作。
            </div>
            <i class="el-icon-question gray"></i>
          </el-tooltip>
        </span>

        <div class="template-small-title">{{ name }}</div>

      </template>

      <el-descriptions-item v-for="(item, index) in properties" :key="index">
        <template slot="label">
          {{ item.name }}
          <el-tooltip class="item" effect="dark" :content="item.description" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
        {{ getProperty(item) }}
      </el-descriptions-item>

    </el-descriptions>

    <!-- 添加或修改协议配置对话框 -->
    <configuration-add-edit submitType="save" @submit="submitConfiguration" ref="configurationAddEdit" />

    <!-- 标签信息  -->
    <el-descriptions :column="3" class="descriptions" border>
      <template slot="title">
        <span>标签</span>&nbsp;&nbsp;
        <el-button
          @click="deviceTagsUpdate"
          icon="el-icon-edit"
          class="edit-button"
          type="text"
          v-hasPermi="['iot:device:edit']"
        >编辑
        </el-button>
      </template>
      <el-descriptions-item v-for="item in tags" :key="item.id">
        <template slot="label">
          {{ item.key }} ({{ item.name }})
        </template>
        {{ item.value }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 添加或修改设备标签对话框 -->
    <device-tags-add-edit ref="deviceTagsAddEdit"/>

  </div>
</template>

<script>
import { deployDevice, resetConfiguration, updateConfiguration } from '@/api/iot/device'
import { getConfigMetadata } from '@/api/iot/product'
import DeviceAddEdit from '@/views/iot/device/deviceAddEdit'
import { mapState } from 'vuex'
import ConfigurationAddEdit from '@/views/iot/product/configurationAddEdit'
import DeviceTagsAddEdit from '@/views/iot/device/deviceTagsAddEdit'

export default {
  name: 'DeviceDescriptions',
  // 字典
  dicts: [
    'iot_product_device_type'
  ],
  components: {
    // 设备添加修改对话框组件
    DeviceAddEdit,
    // 协议配置对话框
    ConfigurationAddEdit,
    //设备标签新增修改对话框
    DeviceTagsAddEdit
  },
  data() {
    return {
      //认证配置类型名称
      name: undefined,
      //认证配置列表
      properties: [],
      // 协议配置信息
      configuration: {},
      //标签列表
      tags: [],
    }
  },
  computed: {
    ...mapState({
      deviceDetailInfo: state => state.device.deviceDetailInfo,
    })
  },
  watch: {
    // 设备详情信息
    deviceDetailInfo(data) {
      if (data) {
        this.getConfigMetadata()
        // 认证配置赋值
        this.configuration = data.configuration
        this.tags = data.tags || []
      }
    },
  },
  methods: {
    /** 编辑按钮操作 */
    deviceUpdate() {
      this.$refs.deviceAddEdit.handleUpdate(this.deviceDetailInfo.id)
    },
    /** 编辑编辑设备标签按钮操作 */
    deviceTagsUpdate() {
      this.$refs.deviceTagsAddEdit.handleUpdate(this.deviceDetailInfo.id)
    },
    /** 协议配置编辑按钮操作 */
    configurationUpdate() {
      this.$refs.configurationAddEdit.handleUpdate(this.properties, this.configuration)
    },

    /** 提交协议配置信息 */
    submitConfiguration(formData, callback) {
      updateConfiguration(this.deviceDetailInfo.id, formData).then(() => {
        if (typeof callback === 'function') {
          callback()
        }
        this.$store.dispatch('GetDeviceDetailInfo', this.deviceDetailInfo.id)
      })
    },

    /** 获取产品需要的配置定义信息 */
    getConfigMetadata() {
      getConfigMetadata(this.deviceDetailInfo.productId).then(({ data }) => {
        if (data) {
          this.name = data.name
          this.properties = data.properties || []
        }
      })
    },

    getProperty(data) {
      let property = this.configuration[data.property]
      if (property) {
        return data.type.type === 'password' ? '••••••' : this.configuration[data.property]
      }
      return ''
    },

    /** 恢复默认配置 */
    resetConfiguration() {
      resetConfiguration(this.deviceDetailInfo.id).then(() => {
        // 获取设备详情信息
        this.$store.dispatch('GetDeviceDetailInfo', this.deviceDetailInfo.id)
        this.$modal.msgSuccess("恢复默认配置成功")
      })
    },

    /** 应用配置 */
    applyConfiguration() {
      deployDevice(this.deviceDetailInfo.id).then(() => {
        // 获取设备详情信息
        this.$store.dispatch('GetDeviceDetailInfo', this.deviceDetailInfo.id)
        this.$modal.msgSuccess("应用成功")
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.descriptions {
  margin-top: 20px;

  .template-small-title {
    margin-top: 20px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
  }
}

.edit-button {
  margin-left: 30px;
}

.gray {
  color: #909399;
}
</style>
